<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            position: absolute;
            left: 50%;
            bottom: 50%;
            transform: translate(-50%);
            width: 148px;
            height: 60px;
            background-image: url(btn.png);
            background-position-y: 0;
            background-size: 148px auto;
        }
    </style>
</head>
<body>
<!--296 * 2280-->
<!--120-->
<div class="box"></div>
<script>
    const IMG_HEIGHT = 2280 / 2
    const DIV_HEIGHT = 120 / 2
    const MAX_NUM = IMG_HEIGHT / DIV_HEIGHT
    let index = 0
    const box = document.querySelector('.box')
    let timer = null
    box.addEventListener('click', () => {
        clearInterval(timer)
        timer = setInterval(() => {
            if (index < MAX_NUM) {
                index++
                box.style.backgroundPositionY = `${index * DIV_HEIGHT}px`
            } else {
                index = 0
            }
        }, 316 * 3 / MAX_NUM)
    })
</script>
</body>
</html>
